<template>
    <div class="count">
        <h2>当前求和为：{{ countStore.sum }}</h2>
        <select v-model.number="n">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
        </select>
        <button @click="add">加</button>
        <button @click="sub">减</button>
    </div>
</template>

<script setup lang="ts" name="Count">
    import {ref} from 'vue';
    import {useCountStore} from '@/store/count'
    const sum=ref(1);
    const n=ref(1);

    const countStore=useCountStore();
    console.log(countStore.sum);
    
    // 修改数据的三种方法：

    
    function add(){
       // 第一种方式：直接修改
       // countStore.sum+=n.value
       // 第二种方式：批量变更：当数据量多的时候，使用这种方法，可以获得好的性能
       // countStore.$patch({sum:countStore.sum+n.value})
       // 第三种方式：action 需要在文件里面配置
       countStore.increment(n.value)

    }
    function sub(){
        countStore.sum-=n.value
    }
    
</script>

<style scoped>
    .count{
        background-color: skyblue;
        width: 400px;
        height: 100px;
        border-radius: 10px;
    }
    select,button{
        margin: 0 10px;
        height: 25px;
    }
</style>